<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
<!--  v-model:在表单控件上创建双向绑定-------只作用于表单
      表单的值被修改，data中的数据也会被改；
      data中的值被改，表单的值也会被改
      -->
      <input type="text" v-model="message" />{{message}}
        <button @click="changeMsg">单击我一下</button> <hr/>
<!-- 复选框       -->
        <input  value="a" type="checkbox" v-model="hobbies" />爬山
        <input  value="b"  type="checkbox" v-model="hobbies" />游泳
        <input  value="c"  type="checkbox" v-model="hobbies" />吃饭
        <input  value="d"  type="checkbox" v-model="hobbies" />睡觉
        <input  value="e" type="checkbox" v-model="hobbies" />原神
            {{hobbies}} <hr/>
<!--  单选框      -->
        <input value="1" type="radio"  v-model="sex"/>男
        <input value="0" type="radio"  v-model="sex"/>女
        {{sex}}
        <hr/>、
        <select v-model="country">
            <option value="zh">中国</option>
            <option value="usa">美国</option>
            <option value="jp">日本</option>
        </select>
        {{country}}
<!-- 下拉框-->

    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:"",
                hobbies:["爬山","游泳","吃饭","睡觉","原神"],
                sex:1,
                country:"zh"
            },
            methods:{
                changeMsg(){
                    this.message="我变了"
                }
            }

        })
    </script>
</html>